<template>
	<div>
		<div class="screensharemark column"></div>
		<div class="column">
			<!-- <div class="markop">
      <button class="exit" @click="closescreenmark()">{{$t('ivcs.close')}}</button>
    </div> -->
			<video class="screenmarkvideo" controls playsinline autoplay muted id="screenmark" v-show="1"></video>
			<whiteboardclear class="whiteboard" ref="wb" @closescreenmark="closescreenmark" v-if="writingShow"></whiteboardclear>
		</div>
	</div>
</template>

<script>
import Whiteboardclear from './Whiteboardclear';
export default {
	name: 'Screensharemark',
	components: { Whiteboardclear },
	data() {
		return {};
	},
	props: ['screenstreampublication', 'screenstream', 'writingShow'],
	mounted() {},
	methods: {
		closescreenmark() {
			this.$emit('closescreenmark');
			this.$refs.wb.clearCanvas();
		}
	}
};
</script>

<style scoped>
.screenmarkvideo {
	width: 1000px;
	height: 500px;
	position: absolute;
	object-fit: contain;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	background-color: #1f1f1f;
}

.screensharemark {
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(51, 51, 51, 0.72);
	opacity: 0.2983;
	left: 0;
	top: 0;
}

.column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.closeimg {
	width: 40px;
	height: 40px;
	right: 10px;
	/*position: absolute;*/
	/*top:110px;*/
	/*right: 10px;*/
}

.markop {
	width: 1000px;
	height: 50px;
	position: absolute;
	top: 70px;
	/*background: yellow;*/
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.exit {
	width: 96px;
	height: 36px;
	background: rgba(82, 153, 248, 1);
	/*border:1px solid rgba(49,98,197,1);*/
	border-radius: 4px;
	font-size: 14px;
	font-family: PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
}

.whiteboard {
	width: 1000px;
	height: 500px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
}
</style>
